<template>
  <view class="viewpoint">
    <scroll-view class="notice-detail" scroll-y>
      <view class="title">{{ notice?.title }}</view>
      <view class="createTime"
        >发布时间：{{
          moment(notice.createTime).format("YYYY-MM-DD HH:mm:ss")
        }}</view
      >
      <image
        v-if="notice?.image !== null"
        style="width: 100%; height: 400rpx"
        :src="notice?.image"
        mode="scaleToFill"
      />
      <view class="content" v-html="notice?.content"></view>
    </scroll-view>
  </view>
</template>

<script setup>
import { onMounted, ref, reactive } from "vue";
import { getNoticeDetail } from "../../utils/index";
import { onLoad } from "@dcloudio/uni-app";
import moment from "moment";
const notice = reactive({});
const getDetail = async (id) => {
  const res = await getNoticeDetail(id);
  if (res?.data?.code === 200) {
    Object.assign(notice, res?.data?.data || {});
  }
};

onLoad((options) => {
  getDetail(options?.id);
});
</script>

<style lang="scss">
page {
  height: 100vh;
  background: linear-gradient(to bottom, #f8f8f8, #edf6e3, #cff2a2);
}

.viewpoint {
  width: 100%;
  height: 100%;
  padding: 30rpx 25rpx;
  box-sizing: border-box;

  .notice-detail {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;

    .title {
      width: 100%;
      font-size: 45rpx;
      height: 60rpx;
      line-height: 60rpx;
      color: #000;
      text-align: center;
      font-weight: bold;
    }

    .createTime {
      width: 100%;
      font-size: 24rpx;
      height: 60rpx;
      line-height: 60rpx;
      color: #000;
      text-align: center;
      font-weight: bold;
    }

    .content {
      width: 100%;
      color: #000;
      text-align: left;
      font-weight: bold;
      overflow-wrap: break-word;
      /* 新标准 */
    }
  }
}
</style>